<template>
    <div>
        <Modal :title="shopCalendarTitle" v-model="shopCalendarModal" :mask-closable='false' :width="600" :styles="{top: '90'}">
            <Form ref="formItem" :model="formItem" :label-width="90" :rules="priorityFormValidate">
                <FormItem label="设定日期" prop="setDate">
                    <DatePicker  :value="formItem.setDate" @on-change="updateSetDate" type="date" multiple placeholder="选择日期" style="width: 300px"></DatePicker>
                </FormItem>
                <FormItem label="星期" style="margin-top: -10px;" prop="week">
                    <CheckboxGroup v-model="formItem.week">
                        <Checkbox label="星期一"></Checkbox>
                        <Checkbox label="星期二"></Checkbox>
                        <Checkbox label="星期三"></Checkbox>
                        <Checkbox label="星期四"></Checkbox>
                        <Checkbox label="星期五"></Checkbox>
                        <Checkbox label="星期六"></Checkbox>
                        <Checkbox label="星期日"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="工作状态" style="margin-top: -10px;" prop="workStatus">
                    <RadioGroup v-model="formItem.workStatus" @on-change="checkChangeWorkStatus">
                        <Radio label="工作">工作</Radio>
                        <Radio label="休息">休息</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="工作时间" style="margin-top: -10px" prop="amTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                    <TimePicker v-model="formItem.amTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select am" style="width: 230px"></TimePicker>
                </FormItem>
                <FormItem label="" style="margin-top: -55px;margin-left: 248px" prop="pmTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                    <TimePicker v-model="formItem.pmTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select pm" style="width: 230px"></TimePicker>
                </FormItem>
                <FormItem label="备注" style="margin-top: -5px;">
                    <Input v-model="formItem.remarks" type="textarea" :rows="4" placeholder="Enter something..." />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="submit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {personalCalendarUpdate} from  "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    export default {
        name: "personalCalendar",
        data:function () {
            let validate = function(rule, value, callback) {
                if (Array.isArray(value)) { //格式为：daterange、datetimerange检测
                    value.map(function (item) {
                        if (item === "") {
                            return callback("日期不能为空")
                        }
                    })
                } else { //格式为：date、datetime、year、month 检测
                    if (value === '') {
                        return callback("日期不能为空")
                    }
                }
                return callback();
            };
            let weekValidate = function(rule, value, callback) {
                if (value.length === 0) {
                    return callback("星期不能为空")
                }
                return callback();
            };
            let workStatusValidate = function(rule, value, callback) {
                if (value.length === 0) {
                    return callback("工作状态不能为空")
                }
                return callback();
            };
            return{
                shopCalendarTitle:"日历设定",
                shopCalendarModal:false,
                week:[],
                formItem:{
                    date:"",
                    setDate:"",
                    oneBiweekly:"",
                    workStatus:"",
                    amTime:"",
                    pmTime:"",
                    remarks:"",
                    week:[],
                    userId:"",
                    loginName:"",
                },
                priorityFormValidate: {
                    setDate: [{required: true,validator: validate,trigger: 'change'}],
                    workStatus:[{required: true,validator: workStatusValidate, trigger: "change"}],
                },
                changeTimeRequired:false,
                timeCheck: [
                    {required: false}
                ],
                timeValidate: [
                    {required: true,validator: validate,trigger: 'change'}
                ],
            }
        },
        methods: {
            calendarAdjustment: function (msg) {
                if(msg!==""){
                    this.formItem.loginName = msg;
                    this.$refs.formItem.resetFields();
                    this.shopCalendarModal = true;
                    this.changeTimeRequired = true;
                }
            },
            //取消
            cancel(){
                this.shopCalendarModal = false;
            },
            //提交
            submit(){
                this.$refs.formItem.validate(valid => {
                    if(valid){
                        let str = [];
                        let month = new Date().getMonth()+ 1;
                        let time1 = new Date().getFullYear()+"-"+month+"-"+new Date().getDate();
                        str = this.formItem.setDate.split(",");
                        for (let i = 0; i < str.length; i++) {
                            let key = str[i];
                            let time2 = key.substring(0, 4) + "-" + key.substring(5, 7) + "-" + key.substring(8, 10);
                            if (Date.parse(time1.trim().replace(/-/g, '/')) > Date.parse(time2.trim().replace(/-/g, '/'))) {
                                this.$Message.warning("日期:" + time2 + "已过期，请重新修改！");
                                return;
                            }
                        }
                        personalCalendarUpdate(this.formItem).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.shopCalendarModal = false;
                                this.formItem.remarks = "";
                                this.$parent.refreshMember();
                            }
                        })
                    }
                })
            },
            //设定日期选择
            updateSetDate(v){
                let dateList = v.toString();
                this.formItem.setDate = dateList;
            },
            //工作状态选择
            checkChangeWorkStatus(v){
                if(v === "工作"){
                    this.changeTimeRequired = false;
                }else{
                    this.changeTimeRequired = true;
                }
            },
        }
    }
</script>

